import React, { useState, useEffect } from 'react'
import { useParams } from 'react-router-dom'
import {
    Form,
    Input,
    Button,
    Dialog,
    TextArea,
    DatePicker,
    Selector,
    Slider,
    Stepper,
    Switch,
    Toast
} from 'antd-mobile'
import { FormInstance } from 'antd-mobile/es/components/form'
import dayjs from 'dayjs'
import { CloseCircleFill } from 'antd-mobile-icons'
import { addCard } from '../api/api'
import type { ToastHandler } from 'antd-mobile/es/components/toast'
type ParamsType = {
    man: string;
}
export default function
    () {
    const [pickerVisible, setPickerVisible] = useState(false)
    const onFinish = async (params: any) => {

        const name = params.name
        const address = params.address
        const sex = (params.sex)[0]
        const tel = params.tel
        const Y = params.birthday.getFullYear() + "-";
        const M = (params.birthday.getMonth() + 1 < 10 ? "0" + (params.birthday.getMonth() + 1) : params.birthday.getMonth() + 1) + "-";
        const D = params.birthday.getDate() < 10 ? "0" + params.birthday.getDate() : params.birthday.getDate() + "";
        const birthday = Y + M + D;
        const cardId = params.cardId
        const obj = {
            name, address, sex, tel, birthday, cardId
        }
        const data = await addCard(obj)
        console.log(data);

        //@ts-ignore
        if (data.status == 200) {
            Toast.show({
                content: '提交成功！',
                afterClose: () => {
                    console.log('after')
                },
            })

        }
    };
    return (
        <div>
            <Form
                initialValues={{
                    name: ''
                }}
                layout='horizontal'
                onFinish={onFinish}
                footer={
                    <Button onClick={(values) => {
                        console.log(values);
                    }} block type='submit' color='primary' size='large'>
                        提交
                    </Button>
                }
            >
                <Form.Item
                    name='name'
                    label='姓名'
                    rules={[{ required: true, message: '姓名不能为空' }, {
                        pattern: /^[\u4e00-\u9fa5]+$/,
                        message: "必须输入汉字",
                    }]}
                >
                    <Input onChange={console.log} placeholder='请输入姓名' />
                </Form.Item>
                <Form.Item name='sex' label='性别'>
                    <Selector
                        columns={3}
                        options={[
                            { label: '男', value: '0' },
                            { label: '女', value: '1' },
                            { label: '其他', value: 'banana' },
                        ]}
                    />
                </Form.Item>
                <Form.Item
                    name='cardId'
                    label='身份证'
                    rules={[{ required: true, message: '身份证不能为空' }, {
                        pattern: /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/,
                        message: "请输入正确身份证号码",
                    }]}
                >
                    <Input onChange={console.log} placeholder='请输入身份证' />
                </Form.Item>
                <Form.Item
                    name='tel'
                    label='电话'
                    rules={[{ required: true, message: '电话不能为空' }, {
                        pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
                        message: "手机号格式不对",
                    }]}
                >
                    <Input onChange={console.log} placeholder='请输入电话' />
                </Form.Item>
                <Form.Item
                    noStyle
                    shouldUpdate={(prevValues, curValues) =>
                        prevValues.birthday !== curValues.birthday
                    }
                >
                    {({ getFieldValue, setFieldsValue }) => (
                        <Form.Item
                            name='birthday'
                            label='生日'
                            trigger='onConfirm'
                            arrow={
                                getFieldValue('birthday') ? (
                                    <CloseCircleFill
                                        style={{
                                            color: 'var(--adm-color-light)',
                                            fontSize: 14,
                                        }}
                                        onClick={e => {
                                            e.stopPropagation()
                                            setFieldsValue({ birthday: null })
                                        }}
                                    />
                                ) : (
                                    true
                                )
                            }
                            onClick={() => {
                                setPickerVisible(true)
                            }}
                        >
                            <DatePicker
                                visible={pickerVisible}
                                onClose={() => {
                                    setPickerVisible(false)
                                }}
                            >
                                {value =>
                                    value ? dayjs(value).format('YYYY-MM-DD') : '请选择日期'
                                }
                            </DatePicker>
                        </Form.Item>
                    )}
                </Form.Item>
                <Form.Item name='address' label='地址' help='详情地址'>
                    <Input placeholder='请输入地址' />
                </Form.Item>
            </Form>
        </div>
    )
}
